<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人博客</title>
    <link th:href="@{/webjars/jquery.3.4.1/jquery.js}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <link th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/carousel.css}" rel="stylesheet">
    <link th:href="@{/css/main.css}" rel="stylesheet">
    <link th:href="@{/css/head.css}" rel="stylesheet">
    <link th:href="@{/css/foot.css}" rel="stylesheet">
    <script>
        window.onload=function () {
            var path = window.localStorage.getItem("historyPath");
            var toHistory = window.localStorage.getItem("toHistory");
            if(toHistory=="true"&&path!=""&&path!=null){
                window.location.href=path;
                window.localStorage.removeItem("historyPath");
                window.localStorage.removeItem("toHistory");
            }

        }
    </script>

</head>

<body>
    <!--引入导航栏-->
    <div th:include="/common/head :: top"></div>

    <!-- 博客首页的轮播图 -->
    <div style="clear: both;"></div>
    <input type="hidden" name="username" />
    <div id="content">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class=""></li>
                <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img th:src="@{/img/3.jpg}">
                </div>
                <div class="carousel-item">
                    <img th:src="@{/img/2.jpg}">
                </div>
                <div class="carousel-item">
                    <img th:src="@{/img/1.jpg}">
                </div>
            </div>

            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">前一个</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">后一个</span>
            </a>
        </div>
    </div>

    <div>
    <!-- 博客首页的文章列表展示 -->
    <div class="ui top attached teal segment" style="width: 62%; float: left; margin-left: 100px;">
        <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
            <div class="ui mobile reversed stackable grid" th:each="list : ${topArticle}">
                <div class="eleven wide column">
                    <a th:href="@{'/article/detail/' + ${list.articleId}}">
                        <h3 class="ui header" th:text="${list.articleTitle}">这里是标题</h3>
                    </a><br>
                    <p class="m-text" th:text="${list.articleSummary}">这里是简介</p>
                    <div class="ui stackable grid">
                        <div class="eleven wide column">
                            <div class="ui mini horizontal link list">
                                <div class="item">
                                    <!--<img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">-->
                                    <img th:src="@{${list.user.userProfilePhoto}}" alt="" class="ui avatar image">
                                    <div class="content"><a class="header">[[${list.user.userName}]]</a></div>
                                </div>
                                <div class="item">
                                    <i class="calendar icon"></i> [[${list.articleDate}]]
                                </div>
                                <!--<i class="eye icon"></i>-->
                                <div class="item">阅读数 [[${list.articleViewCount}]]</div>
                                <!--<div class="item">-->
                                    <!--<i class="comment icon"></i> [[${list.articleCommentCount}]]-->
                                <!--</div>-->
                                <!--<div class="item">-->
                                    <!--<i class="like icon" aria-hidden="true"></i> [[${list.articleLikeCount}]]-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="five wide column">
                    <a th:href="@{'/article/detail/' + ${list.articleId}}">
                        <img th:src="@{${list.articlePicture}}" alt="" class="ui rounded image">
                    </a>
                </div>
                <hr style="border-bottom: 1px rgb(231, 231, 231) solid; width: 100%"/>
            </div>
            <br>
        </div>
    </div>

        <div id="contentRight">
            <nav class="category">
                <ul class="introduction">
                    <li><a>推荐文章</a></li>
                    <!--<hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>-->
                    <li th:each="recommend : ${recommendArticle}"
                        th:if="${session.loginUser != null and recommendArticle != null}">
                        <a th:href="@{'/article/detail/' + ${recommend.articleId}}" th:text="${recommend.articleTitle} +
                        '(' + '阅读数：' + ${recommend.articleViewCount} +')'"></a>
                    </li>
                    <li th:each="hot : ${hotArticle}"
                        th:if="${session.loginUser == null or recommendArticle == null}">
                        <a th:href="@{'/article/detail/' + ${hot.articleId}}" th:text="${hot.articleTitle} +
                        '(' + '阅读数：' + ${hot.articleViewCount} +')'"></a>
                    </li>
                </ul>
                <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
                <ul class="introduction">
                    <li><a>最新文章</a></li>
                    <li th:each="recent : ${recentArticle}">
                        <a th:href="@{'/article/detail/' + ${recent.articleId}}" th:text="${recent.articleTitle} +
                        '(' + '阅读数：' + ${recent.articleViewCount} +')'"></a>
                    </li>
                </ul>
            </nav>
        </div>

    </div>





    <!--引入底部栏-->
    <div th:include="/common/foot :: foot"></div>

</body>
    <script th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/myJs/time.js}"></script>

</html>